<template>
    <div class="write-blog-container">
        <aside style="overflow: hidden">
            <a-button type="primary" ghost class="fr" @click="showDrawerAndSaveBlog">发布</a-button>
            <a-button type="danger" ghost class="graft" @click="handleSaveInformation">保存草稿</a-button>
            <a-button type="danger" class="out-edit" @click="handleOutEdit">退出编辑</a-button>
        </aside>
        <main class="app-container" style="padding-top: 0">
            <a-form>
                <a-form-item style="margin-bottom: 40px;" prop="title">
                    <MDinput v-model="blogInfoForm.title" :maxlength="100" name="name" required>
                        标题
                    </MDinput>
                </a-form-item>
                <a-form-item label="内容" prop="title">

                    <!--markdown展示-->
                    <div class="editor-container">

                        <!--markdown编辑-->
                        <markdown-editor ref="markdownEditor" :value="blogInfoForm.content" @save="markSave"/>
                    </div>
                </a-form-item>
            </a-form>
        </main>
        <div>
            <a-drawer
                    title="发布文章"
                    width="700"
                    placement="right"
                    :closable="true"
                    :maskClosable="true"
                    :visible="visible"
                    :after-visible-change="afterVisibleChange"
                    @close="onClose">

                <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
                    <a-form-item label="博客标签：">
                        <div>
                            <template v-for="(tag, index) in tags">
                                <a-tooltip v-if="tag.length > 20" :key="tag" :title="tag">
                                    <a-tag :key="tag" :closable="index !== -1" @close="() => handleClose(tag)">
                                        {{ `${tag.slice(0, 20)}...` }}
                                    </a-tag>
                                </a-tooltip>
                                <a-tag v-else :key="tag" :closable="index !== -1" @close="() => handleClose(tag)">
                                    {{ tag }}
                                </a-tag>
                            </template>

                            <a-input
                                    v-if="inputVisible"
                                    ref="input"
                                    type="text"
                                    size="small"
                                    :style="{ width: '78px' }"
                                    :value="inputValue"
                                    @change="handleInputChange"
                                    @blur="handleInputConfirm"
                                    @keyup.enter="handleInputConfirm"
                            />
                            <a-tag v-else style="background: #fff; borderStyle: dashed;" @click="showInput">
                                <a-icon type="plus"/>
                                New Tag
                            </a-tag>
                        </div>
                        <a-card style="width: 400px">
                            <a-tag @click="handleTagChange(existTag.tagName)" v-for="(existTag, index) in existTags"
                                   :key="index">
                                {{ existTag.tagName }}
                            </a-tag>
                        </a-card>
                    </a-form-item>
                    <a-form-item label="分类专栏：">
                        <div>
                            <template v-for="(categoryColumn, index) in categoryColumns">
                                <a-tooltip v-if="categoryColumn.length > 20" :key="categoryColumn"
                                           :title="categoryColumn">
                                    <a-tag :key="categoryColumn" :closable="index !== -1"
                                           @close="() => handleCategoryClose(categoryColumn)">
                                        {{ `${categoryColumn.slice(0, 20)}...` }}
                                    </a-tag>
                                </a-tooltip>
                                <a-tag v-else :key="categoryColumn" :closable="index !== -1"
                                       @close="() => handleCategoryClose(categoryColumn)">
                                    {{ categoryColumn }}
                                </a-tag>
                            </template>

                            <a-input
                                    v-if="inputCategoryVisible"
                                    ref="input"
                                    type="text"
                                    size="small"
                                    :style="{ width: '78px' }"
                                    :value="inputCategoryValue"
                                    @change="handleCategoryInputChange"
                                    @blur="handleCategoryColumn"
                                    @keyup.enter="handleCategoryColumn"
                            />
                            <a-tag v-else style="background: #fff; borderStyle: dashed;" @click="showCategoryInput">
                                <a-icon type="plus"/>
                                New Tag
                            </a-tag>
                        </div>
                        <a-card style="width: 400px">
                            <a-tag @click="handleCategoryChange(existCategoryColumn.categoryName)"
                                   v-for="(existCategoryColumn, index) in existCategoryColumns"
                                   :key="index">
                                {{ existCategoryColumn.categoryName }}
                            </a-tag>
                        </a-card>
                    </a-form-item>
                    <a-form-item label="文章类型">
                        <div>
                            <a-select style="width: 120px" v-model="blogTypeId" @change="handleBlogTypeChange">
                                <a-select-option :value="blogType.id" v-for="(blogType, index) in blogTypes"
                                                 :key="index">
                                    {{ blogType.type }}
                                </a-select-option>
                            </a-select>
                        </div>
                    </a-form-item>
                    <a-form-item label="发布形式">
                        <a-radio-group v-model="blogInfoForm.blogStatus">
                            <a-radio :value="1">
                                公开
                            </a-radio>
                            <a-radio :value="2">
                                私密
                            </a-radio>
                        </a-radio-group>
                    </a-form-item>
                    <a-button style="margin-left: 400px;" type="dashed">取消</a-button>
                    <a-button style="margin-left: 10px;" type="primary" ghost>保存草稿</a-button>
                    <a-button style="margin-left: 10px;" type="danger" @click="publishBlog">发布</a-button>
                </a-form>
            </a-drawer>
        </div>
    </div>
</template>

<script>
    import MarkdownEditor from '@/components/MarkdownEditor'
    import MDinput from '@/components/MDinput'
    import {findAllBlogTags} from "@/api/blog/blogTag";
    import {findAllCategoryColumn} from "@/api/blog/blogCategoryColumn";
    import {findAllBlogType} from "@/api/blog/blogType";
    import {saveBlogInfoByTagNames} from "@/api/blog/blogInfo";

    export default {
        name: 'writeBlogMd',
        components: {MarkdownEditor, MDinput},
        data() {
            return {
                formLayout: 'horizontal',
                form: this.$form.createForm(this, {name: 'coordinated'}),
                visible: false,
                blogInfoForm: {
                    title: '',
                    content: '',
                    pageViewNum: 0,
                    likeNum: 0,
                    blogStatus: null,
                    tUserId: this.$store.state.user.id
                },
                fileList: [],
                languageTypeList: {
                    'en': 'en_US',
                    'zh': 'zh_CN',
                    'es': 'es_ES'
                },
                dialogImageUrl: '',
                dialogVisible: false,
                inputVisible: false,
                inputCategoryVisible: false,
                inputValue: '',
                inputCategoryValue: '',
                tags: [],
                categoryColumns: [],
                existTags: [],
                existCategoryColumns: [],
                blogTypeId: null,
                blogTypes: []
            }
        },
        mounted() {
            this.init();
        },
        methods: {
            async init() {
                const blogTags = await findAllBlogTags()
                this.existTags = blogTags;
                const categoryColumns = await findAllCategoryColumn()
                this.existCategoryColumns = categoryColumns;
                const blogTypes = await findAllBlogType();
                this.blogTypes = blogTypes;
            },
            /* 退出编辑 */
            handleOutEdit() {
                this.$router.push('/blogCreateCenter/blogHome')
            },
            handleSaveInformation() {
            },
            markSave(val) {
                this.form.content = val
                console.log(val)
            },
            afterVisibleChange(val) {
                console.log('visible', val);
            },
            showDrawerAndSaveBlog() {
                this.visible = true;
            },
            onClose() {
                this.visible = false;
            },
            /* 处理关闭新增标签按钮 */
            handleClose(removedTag) {
                const tags = this.tags.filter(tag => tag !== removedTag);
                this.tags = tags;
            },
            /* 处理关闭新增标签按钮 */
            handleCategoryClose(removedTag) {
                const categoryColumns = this.categoryColumns.filter(categoryColumn => categoryColumn !== removedTag);
                console.log(categoryColumns);
                this.categoryColumns = categoryColumns;
            },
            showInput() {
                this.inputVisible = true;
                this.$nextTick(function () {
                    this.$refs.input.focus();
                });
            },

            showCategoryInput() {
                this.inputCategoryVisible = true;
                this.$nextTick(function () {
                    this.$refs.input.focus();
                });
            },

            handleInputChange(e) {
                this.inputValue = e.target.value;
            },

            handleCategoryInputChange(e) {
                this.inputCategoryValue = e.target.value;
            },

            handleInputConfirm() {
                const inputValue = this.inputValue;
                let tags = this.tags;
                if (inputValue && tags.indexOf(inputValue) === -1) {
                    tags = [...tags, inputValue];
                }
                Object.assign(this, {
                    tags,
                    inputVisible: false,
                    inputValue: '',
                });
            },
            handleCategoryColumn() {
                const inputCategoryValue = this.inputCategoryValue;
                let categoryColumns = this.categoryColumns;
                if (inputCategoryValue && categoryColumns.indexOf(inputCategoryValue) === -1) {
                    categoryColumns = [...categoryColumns, inputCategoryValue];
                }
                console.log(categoryColumns);
                Object.assign(this, {
                    categoryColumns,
                    inputCategoryVisible: false,
                    inputCategoryValue: '',
                });
            },
            handleTagChange(value) {
                this.tags.push(value);
                this.handleInputConfirm()
                console.log(value)
                console.log(this.tags)
            },
            handleCategoryChange(value) {
                this.categoryColumns.push(value);
                this.handleCategoryColumn()
            },
            handleBlogTypeChange(value) {
            },
            markSave(value) {
                this.blogInfoForm.content = value;
            },
            /* 发布博客 */
            async publishBlog() {
                if (this.blogInfoForm.content === null || this.blogInfoForm.content === '') {
                    this.$message.info({content: '请按保存键保存或Ctrl + s!', duration: 2});
                    return;
                }
                const params = {
                    blogInfoAndTagForm: {
                        blogInfoForm: this.blogInfoForm,
                        tagNames: this.tags,
                        categoryNames: this.categoryColumns
                    },
                    typeId: this.blogTypeId,
                    userId: this.$store.state.user.id
                }
                const data = await saveBlogInfoByTagNames(params)
                this.$store.commit('UPDATE_BLOG', data)
                this.$message.success({content: '发布成功', duration: 2});
                this.$router.push({
                    name: 'showAfterCreated'
                })
                console.log(data)
                console.log(this.blogInfoForm)
            }
        }
    }
</script>

<style scoped>
    .write-blog-container {
        padding: 20px;
    }

    .editor-container {
        margin-bottom: 30px;
    }

    .graft {
        margin-left: 10px;
    }

    .out-edit {
        float: right;
    }

</style>
<style>
    .v-note-wrapper .v-note-panel .v-note-edit.divarea-wrapper.transition {
        min-height: calc(100vh - 300px);
    }
</style>
